// 在根选择器设置两个自定义属性
:root {
  //--color: #ee6666;
  //--percentage: 25%;
}

// css3 有一个新特性 @property，可以解决背景色不能过渡的问题
// 其实和根组件自定义属性一样，只是多了一些属性
/* css3 有一个新特性 @property 可以解决这个问题 它的出现 又让css 变强了 */
/* 其实和根组件自定义属性一样 只是多了一些属性 */
/* --color 依旧时自定义属性 */
/* syntax 是 自定义属性的语法规则 可以理解为自定义属性的类型 */
/* inherits 是否允许继承 */
/* initial-value 默认值 */
/* @property 关于该特性 置顶评论会放它的学习链接 */
@property --color {
  syntax: "<color>";
  inherits: false;
  initial-value: #ee6666;
}
@property --percentage {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 25%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 500px;
  text-align: center;
  input {
    display: none;
  }
  label {
    margin: 20px;
    font-size: 14px;
    cursor: pointer;
    &::before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 12px;
      margin-right: 5px;
      border-radius: 3px;
      // 自定义属性用 var() 函数调用
      background-color: var(--color);
    }
    &[for='option2']::before {
      --color: #fac858;
    }
    &[for='option3']::before {
      --color: #91cc75;
    }
    &[for='option4']::before {
      --color: #73c0de;
    }
  }
  input:checked + label {
    font-weight: 700;
    color: var(--color);
  }
  #option2:checked + label {
    // 这里写 color 或 --color 都可以，为了保证一改全改，写成 --color
    --color: #fac858;
  }
  #option3:checked + label {
    --color: #91cc75;
  }
  #option4:checked + label {
    --color: #73c0de;
  }

  // 开始写饼图
  .pie {
    width: 300px;
    height: 300px;
    background-color: #fac858;
    margin: 30px auto;
    border-radius: 50%;
    // 改变像视频演示的状态需要用到锥形渐变
    /*
      从第一个开始计算，每两对值就是一个锥形区域的显示区域，前两个值的角度分别为 0 和 25%，所以就占了 1/4，
      后面的透明色从 25% ~ 100%
      可以简单地理解为：从 0% 到 25% 这个区域为 #ee6666 背景色，从 25% 到 100% 为透明色
    */
    background: conic-gradient(var(--color) 0,
            var(--color) var(--percentage),
            transparent var(--percentage),
            transparent 100%);
    /* 现在可以看到颜色已经有过渡效果了 我们继续改造角度就额可以了 */
    /* 这就好起来了 哈哈哈  */
    transition: --color 0.4s ease, --percentage 0.4s ease;
  }
  #option2:checked ~ .pie {
    --color: #fac858;
    --percentage: 50%;
  }
  #option3:checked ~ .pie {
    --color: #91cc75;
    --percentage: 70%;
  }
  #option4:checked ~ .pie {
    --color: #73c0de;
    --percentage: 100%;
  }
}
